{extend name='public/base' /}
{block name="css"}
<style>
    .layui-upload-drag-self {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 148px;
        height: 148px;
        line-height: 148px;
        vertical-align: top;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        outline: 0;
        margin-right: 13px;
        float: left;
    }

    .layui-input-inlines-self {
        position: relative;
        margin-left: 90px;
        min-height: 36px;
        text-align: left;
    }

    .layui-upload-drag-self .layui-icon {
        font-size: 28px;
        color: #8c939d
    }

    .layui-upload-drag-self .img {
        position: relative;
        height: 148px;
        width: 148px;
    }

    .layui-upload-img {
        width: 148px;
        height: 148px;
        border-radius: 6px;
        margin-top: -3px;
        margin-left: -2px;
    }

    .handle {
        position: absolute;
        width: 148px;
        height: 100%;
        z-index: 100;
        border-radius: 6px;
        top: 0;
        background: rgba(59, 60, 61, 0.6);
        text-align: center;
    }

    .handle .icon-myself {
        z-index: 999;
        transition: all .3s;
        cursor: pointer;
        font-size: 25px;
        width: 25px;
        color: rgba(255, 255, 255, 0.91);
        margin: 0 4px;
    }
</style>
{/block}

{block name='content'}
<div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">搜索ID:</label>
                <div class="layui-input-inline">
                    <input type="text" name="so" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <table class="layui-hide" id="table" lay-filter="table"></table>
    </div>
</div>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添 加</button>
        <button class="layui-btn layui-btn-sm" lay-event="allDel">删 除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <!--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<form class="layui-form" id="form1" action="" style="display: none" lay-filter="example">
    <!--    <form class="layui-form" lay-filter="">-->
    <div style="margin-top: 20px;"></div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属分类</label>
        <div class="layui-input-inline">
            <select name="classify_id" lay-verify="required" lay-reqText="请选择所属分类">
                <option value=""></option>
                {foreach $data['data'] as $key=>$v }
                <option value="{$v['id']}">{$v['name']}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block" style="max-width: 60%">
            <input type="text" name="goods_name" lay-verify="required" lay-reqtext="名称不能为空" autocomplete="off"
                   placeholder="请输入商品名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否上架</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="是">
            <input type="radio" name="status" value="0" title="否" checked="">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品主图</label>
        <div class="layui-upload-drag" id="test10">
            <i class="layui-icon"></i>
            <p>上传商品主图<br>建议270*270</p>
            <div class="layui-hide" id="uploadDemoView">
                <img src="" alt="上传成功后渲染" style="max-width: 148px">
            </div>
        </div>
        <input type="hidden" name="cover" id="cover">
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品规格</label>
        <div style="margin-left: 110px;">
            <div class="layui-form-mid layui-word-aux">名称</div>
            <div class="layui-input-inline" style="width: 150px">
                <input type="text" name="name[]" lay-verify="required" lay-reqtext="类型名称不能为空"
                       placeholder="商品类型" autocomplete="off" class="layui-input">
            </div>

            <div class="layui-form-mid layui-word-aux">价格</div>
            <div class="layui-input-inline" style="width: 120px">
                <input type="number" name="price[]" lay-verify="required" lay-reqtext="价格不能为空"
                       placeholder="商品价格" autocomplete="off" class="layui-input">
            </div>

            <div class="layui-form-mid layui-word-aux">数量</div>
            <div class="layui-input-inline" style="width: 120px">
                <input type="number" name="number[]" lay-verify="required" lay-reqtext="库存数量不能为空"
                       placeholder="商品数量" autocomplete="off" class="layui-input">
            </div>

            <button type="button" class="layui-btn layui-btn">添加</button>
        </div>

        <!--        <div style="margin-left: 110px;margin-top: 20px" class="add-g">-->
        <!--            <div class="layui-form-mid layui-word-aux">名称</div>-->
        <!--            <div class="layui-input-inline" style="width: 150px">-->
        <!--                <input type="number" name="name[]" lay-verify="required" lay-reqtext="商品类型不能为空"-->
        <!--                       placeholder="商品类型" autocomplete="off" class="layui-input">-->
        <!--            </div>-->
        <!--            <div class="layui-form-mid layui-word-aux">价格</div>-->
        <!--            <div class="layui-input-inline" style="width: 120px">-->
        <!--                <input type="number" name="price[]" lay-verify="required" lay-reqtext="商品价格不能为空"-->
        <!--                       placeholder="商品价格" autocomplete="off" class="layui-input">-->
        <!--            </div>-->
        <!--            <div class="layui-form-mid layui-word-aux">数量</div>-->
        <!--            <div class="layui-input-inline" style="width: 120px">-->
        <!--                <input type="number" name="number[]" lay-verify="required" lay-reqtext="商品数量不能为空"-->
        <!--                       placeholder="商品数量" autocomplete="off" class="layui-input">-->
        <!--            </div>-->
        <!--            <button type="button" class="layui-btn layui-btn-danger">删除</button>-->
        <!--        </div>-->

        <!--        <div style="margin-left: 110px;margin-top: 20px" class="add-g">-->
        <!--            <div class="layui-form-mid layui-word-aux">名称</div>-->
        <!--            <div class="layui-input-inline" style="width: 150px">-->
        <!--                <input type="number" name="name[]" lay-verify="required" lay-reqtext="商品类型不能为空"-->
        <!--                       placeholder="商品类型" autocomplete="off" class="layui-input">-->
        <!--            </div>-->
        <!--            <div class="layui-form-mid layui-word-aux">价格</div>-->
        <!--            <div class="layui-input-inline" style="width: 120px">-->
        <!--                <input type="number" name="price[]" lay-verify="required" lay-reqtext="商品价格不能为空"-->
        <!--                       placeholder="商品价格" autocomplete="off" class="layui-input">-->
        <!--            </div>-->
        <!--            <div class="layui-form-mid layui-word-aux">数量</div>-->
        <!--            <div class="layui-input-inline" style="width: 120px">-->
        <!--                <input type="number" name="number[]" lay-verify="required" lay-reqtext="商品数量不能为空"-->
        <!--                       placeholder="商品数量" autocomplete="off" class="layui-input">-->
        <!--            </div>-->
        <!--            <button type="button" class="layui-btn layui-btn-danger">删除</button>-->
        <!--        </div>-->
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品重量</label>
        <div class="layui-input-inline">
            <input type="number" name="weight" lay-verify="required" lay-reqtext="重量不能为空"
                   placeholder="请输入商品重量" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">Kg</div>
    </div>
    <div class="layui-form-item" pane="">
        <label class="layui-form-label">是否包邮</label>
        <div class="layui-input-block">
            <input type="radio" name="postage" value="1" title="是">
            <input type="radio" name="postage" value="0" title="否" checked="">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-form-item" id="imgItem">
            <label class="layui-form-label">上传图片：</label>
            <div class="layui-input-block" style="line-height: 50px;">
                <div class="layui-input-inlines-self" id="imgItemInfo">
                    <div class="layui-upload-drag-self" id="importImg" style="float: left">
                        <div class="layui-form-item"
                             style="border: 1px dashed #e2e2e2;padding: 30px;width: 50px;text-align: center;"
                             id="imgDivs">
                            <i class="layui-icon">&#xe654;</i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">商品详情</label>
        <div class="layui-input-block">
            <textarea class="layui-textarea" id="LAY_demo1" style="display: none"></textarea>
        </div>
    </div>
    <div class="layui-form-item button-s">
        <div class="layui-input-block">
            <button type="reset" class="layui-btn layui-btn-primary form-cancel">取 消</button>
            <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="formInfo">提交</button>
        </div>
    </div>
</form>
{/block}

{block name='js'}
<script>
    layui.use(['form', 'table', 'upload', 'tinymce'], function () {
        let $ = layui.$,
            form = layui.form,
            table = layui.table,
            upload = layui.upload,
            tinymce = layui.tinymce,
            tableData = table.render({
                id: 'testReload',
                elem: '#table',
                toolbar: '#toolbarDemo',
                method: 'post',
                url: '/manage/projects/shop/goods/list',
                title: '分类列表',
                cols: [[
                    {type: 'numbers', align: 'center'},
                    {type: 'checkbox'},
                    {field: 'id', title: 'ID', minWidth: 80, hide: true},
                    {field: 'name', title: '名称', minWidth: 200, align: 'center'},
                    {field: 'createTime', title: '添加日期', minWidth: 100, align: 'center'},
                    {fixed: 'right', title: '操作', toolbar: '#barDemo', minWidth: 100, align: 'center'}
                ]],
                page: true
            });

        //主图上传
        upload.render({
            elem: '#test10',
            url: '/manage/system/upload/image',
            data: {type: 'shop'},
            done: function (res) {
                layer.msg('上传成功');
                $('#test10 i, p').hide();
                $('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
                $('#cover').val(res.data.path);
                console.log(res)
            }
        });

        // //图片绑定鼠标悬浮
        // $(document).on("mouseenter", ".img", function () {
        //     //鼠标悬浮
        //     $(this).find('div:first').removeClass('layui-hide');
        // }).on("mouseleave", ".img", function () {
        //     //鼠标离开
        //     $(this).find('div:first').addClass('layui-hide');
        // });

        //多图上传
        var count = 0;
        upload.render({
            elem: '#imgDivs',
            multiple: true,
            url: '/manage/system/upload/image',
            data: {type: 'shop'},
            done: function (res) {
                if (res.code !== 0) {
                    return layer.msg('上传失败')
                }
                $('#importImg').before(
                    '<div class="layui-upload-drag-self zs-img" style="display: inline-block;float: left" id="importImg' + count + '">' +
                    '<div class="img" id="uploadDemoView' + count + '">' +
                    '<img class="layui-upload-img" style="max-width: 115px" src="' + res.data.src + '">' +
                    '<div class="handle" id="handle' + count + '">' +
                    '<i class="layui-icon icon-myself" id="delImg' + count + '">&#xe640;</i>' +
                    '<input type="hidden" name="show_picture[]" value="' + res.data.path + '">' +
                    '</div>' +
                    '</div>' +
                    '</div>'
                );
                count++;
                let imgNumber = $(".zs-img").length;
                console.log(imgNumber);
                if (imgNumber >= 3) {
                    $('#importImg').attr('class', 'layui-upload-drag-self layui-hide');
                }
            }
        });

        //富文本上传图片
        edit.set({
            uploadImage: {
                type: 'post',
                url: '/manage/system/upload/image',
            }
        });

        //删除图片
        $(document).on('click', '[id^=delImg]', function () {
            let imgNumber = $(".zs-img").length,
                path = $(this).next('input').val(),
                parentDiv = $(this).parent().parent().parent();
            //删除当前图片
            parentDiv.remove();
            //删除云端文件
            $.ajax({
                type: 'post',
                data: {path: path},
                url: '/manage/system/upload/delete',
                success: function (res) {
                    console.log(res)
                }
            });
            //是否恢复上传按钮
            if (imgNumber < 5) {
                $('#importImg').attr('class', 'layui-upload-drag-self');
            }
        });

        //工具栏事件
        table.on('toolbar(table)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':  //添加
                    addData();
                    break;
                case 'del':  //行删除
                    delData();
                    break;
                case 'allDel':  //多选删除
                    let data = checkStatus.data;
                    delData(data);
                    break;
            }
        });
        //监听工具条
        table.on('tool(table)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'edit':
                    editData(data);
                    break;
                case 'del':
                    delData([data]);
                    break;
            }
        });

        // alert(layedit.getContent(index)); //获取编辑器内容
        function addData() {
            $("#form1")[0].reset();
            $('#test10 i, p').show();
            $('#uploadDemoView').addClass('layui-hide');
            $('.zs-img').remove();
            $('#importImg').attr('class', 'layui-upload-drag-self');
            layer.open({
                'type': 1,
                'title': '添加商品',
                content: $('#form1'),
                area: ['800px', '800px'],
                // btn: ['确定', '取消'],
                success: function (layero, index) {
                    let formDemo = edit.build('LAY_demo1');
                    //监听提交
                    form.on('submit(formInfo)', function (data) {
                        let content = edit.getContent(formDemo);
                        data.field['details'] = content;
                        if (content.length <= 1) {
                            layer.msg('请输入详情介绍');
                            return false;
                        }
                        $.ajax({
                            type: 'post',
                            data: data.field,
                            url: '/manage/projects/shop/goods/add',
                            success: function (res) {
                                if (res.code === 0) {
                                    layer.msg('添加成功');
                                } else {
                                    layer.msg(res.message);
                                    return false;
                                }
                            }
                        });
                    });

                    //关闭
                    $('.form-cancel').click(function () {
                        layer.close(index);
                    })
                },
            });
        }

        //编辑
        function editData(data) {
            // $('.button-s').attr('class', 'layui-form-item button-s layui-hide');
            $('.zs-img').remove();
            $.ajax({
                type: 'get',
                url: '/manage/projects/shop/goods/info',
                data: {id: data.id},
                success: function (res) {
                    //表单赋值
                    $('#LAY_demo1').val(res.data.details);
                    let formDemo = edit.build('LAY_demo1');
                    $('#test10 i, p').hide();
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.cover.src);
                    form.val('example', {
                        "classify_id": res.data.classifyId, // "name": "value"
                        "goods_name": res.data.name,
                        "status": res.data.status.toString(),
                        "weight": res.data.weight,
                        "postage": res.data.postage.toString(),
                    });
                    //规格赋值
                    $.each(res.data.spec, function (k, v) {
                        if (k === 0) {
                            $('input[name="name[]"]').val(v.name);
                            $('input[name="price[]"]').val(v.price);
                            $('input[name="number[]"]').val(v.number);
                        }
                    });
                    if (res.data.showPicture) {
                        $.each(res.data.showPicture, function (k, v) {
                            $('#importImg').before(
                                '<div class="layui-upload-drag-self zs-img" style="display: inline-block;float: left" id="importImg' + k + '">' +
                                '<div class="img" id="uploadDemoView' + k + '">' +
                                '<img class="layui-upload-img" style="max-width: 115px" src="' + v.src + '">' +
                                '<div class="handle" id="handle' + k + '">' +
                                '<i class="layui-icon icon-myself" id="delImg' + k + '">&#xe640;</i>' +
                                '<input type="hidden" name="show_picture[]" value="' + v.path + '">' +
                                '</div>' +
                                '</div>' +
                                '</div>'
                            );
                        });
                    }
                    let imgNumber = $(".zs-img").length;
                    if (imgNumber >= 3) {
                        $('#importImg').attr('class', 'layui-upload-drag-self layui-hide');
                    }
                    layer.open({
                        'type': 1,
                        'title': '修改商品信息',
                        content: $('#form1'),
                        area: ['800px', '800px'],
                        // btn: ['取消', '修改'],
                        success: function (layero, index) {
                            form.on('submit(formInfo)', function (res) {
                                res.field['id'] = data.id;
                                res.field['details'] = edit.getContent(formDemo);
                                $.ajax({
                                    type: 'post',
                                    data: res.field,
                                    url: '/manage/projects/shop/goods/update',
                                    success: function (res) {
                                        if (res.code === 0) {
                                            layer.close(index);
                                            layer.msg('修改成功');
                                        } else {
                                            layer.msg(res.message);
                                            return false;
                                        }
                                    }
                                });
                            })
                        }
                    });
                }
            });
            return false;
        }

        //删除
        function delData(arr) {
            layer.confirm('确定删除吗？', function (index) {
                //执行 Ajax 后重载
                $.ajax({
                    type: 'post',
                    data: {data: arr},
                    url: '/manage/projects/shop/goods/delete',
                    success: function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功')
                            table.reload('testReload');
                        } else {
                            layer.msg(res.message);
                        }
                    }
                });
            });
        }
    });
</script>
{/block}